<template>
  <div>
    <a-modal
      v-model:open="open"
      centered
      width="416px"
      title="任务发布"
      :confirm-loading="confirmLoading"
      :mask-closable="false"
      :body-style="{ 'padding-bottom': '0' }"
      :destroy-on-close="true"
      @ok="handleOk"
      @cancel="onCancel"
    >
      <div>
        <a-form
          ref="caseFormRef"
          :model="formState"
          :layout="'vertical'"
          :rules="caseRules"
          :label-col="{ style: { width: '150px' } }"
          class="w-352"
          label-align="left"
        >
          <a-form-item label="任务提交截止时间" name="isStopNow">
            <a-radio-group v-model:value="formState.isStopNow" @change="isStopNowChange">
              <a-radio :value="0">自定义</a-radio>
              <a-radio :value="1">不限制</a-radio>
              <a-radio :value="2">立刻截止</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="" name="endTime">
            <a-date-picker
              v-model:value="formState.endTime"
              :disabled="formState.isStopNow === 2 || formState.isStopNow === 1"
              class="w-352"
              show-time
              :disabled-date="disabledDate"
              format="YYYY/MM/DD HH:mm"
              placeholder="选择日期"
              @change="onChange"
              @ok="onOk"
            />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import type { Rule } from 'ant-design-vue/es/form'
  import dayjs from 'dayjs'
  import { reactive, ref } from 'vue'

  import { learningTasksManageApi } from '@/services/api/aigc-admin'
  const props = defineProps({
    id: {
      type: String,
      default: ''
    },
    visibleModal: {
      type: Boolean,
      default: false
    },
    orgId: {
      type: String,
      default: ''
    },
    isCreator: {
      type: Boolean,
      default: false
    }
  })

  const disabledDate = (val: string | dayjs.Dayjs): boolean => {
    return dayjs(val).format('YYYY-MM-DD HH:mm') < dayjs(new Date()).format('YYYY-MM-DD HH:mm')
  }
  export interface Form {
    endTime?: undefined
    isStopNow?: Number
  }
  const formState = ref<Form>({
    endTime: undefined,
    isStopNow: 0
  })
  const caseRules: Record<string, Rule[]> = {
    isStopNow: [
      {
        required: true,
        message: '请选择任务提交截止时间类型'
      }
    ],
    endTime: [
      {
        required: true,
        message: '请选择截止时间'
      }
    ]
  }
  // const emits = defineEmits(['update:visibleModal', 'ok', 'onCancel'])
  const emits = defineEmits<{
    (e: 'update:visibleModal', bool: boolean): void
    (e: 'success'): void
    (e: 'onCancel'): void
  }>()
  const open = ref(false)

  //
  const caseFormRef = ref()
  const isStopNowChange = () => {
    caseFormRef.value?.clearValidate('endTime')
    formState.value.endTime = undefined
  }

  const onCancel = () => {
    // emits('update:visibleModal', false)
    formState.value = {
      endTime: undefined,
      isStopNow: 0
    }
    open.value = false
  }
  const onChange = (value: dayjs.Dayjs, dateString: string) => {
    console.log('Selected Time: ', value)
    console.log('Formatted Selected Time: ', dateString)
  }

  const onOk = (value: dayjs.Dayjs) => {
    console.log('onOk: ', value)
  }
  const confirmLoading = ref<boolean>(false)
  const handleOk = async (): Promise<void> => {
    try {
      confirmLoading.value = true
      // 处理截止类型
      let isStopNow
      if (formState.value.isStopNow === 0 || formState.value.isStopNow === 1) {
        isStopNow = false
      } else if (formState.value.isStopNow === 2) {
        isStopNow = true
      }

      // 处理时间
      const endTime = formState.value.endTime ? dayjs(formState.value.endTime).format('YYYY-MM-DD HH:mm') + ':00' : null
      const res = await learningTasksManageApi.publish(
        {
          id: props.id,
          classId: props.orgId,
          isCreator: props.isCreator,
          isStopNow,
          endTime
        },
        { isAddUid: true }
      )

      message.success('发布成功')
      console.log(res)
      emits('success')
      onCancel()
    } catch (error) {
      console.error(error)
    }
    confirmLoading.value = false
  }

  defineExpose({
    open: () => {
      open.value = true
      // initList()
    }
  })
</script>

<style lang="less" scoped>
  p {
    margin-top: 8px;
    line-height: 22px;
    color: rgba(21, 23, 27, 0.95);
  }
</style>
